<template>
	<view class="popover">
		<slot></slot>
		<view class="list ss-p-t-25 ss-p-l-20 ss-p-b-25" v-if="show">
			<view class="item ss-flex justify-start align-center" @click="addFriend">
				<image class="item-image"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250324/8e2364c9e2615e0c32cfc06e978f7b56.png">
				</image>
				<view class="item-text">添加好友</view>
			</view>
			<view class="item ss-flex justify-start align-center ss-m-t-22" @click="createGroup">
				<image class="item-image"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250324/8cb9228392cd8e8c26156dcc9b2f21e1.png">
				</image>
				<view class="item-text">创建群聊</view>
			</view>
			<view class="item ss-flex justify-start align-center ss-m-t-22" @click="scanCode">
				<image class="item-image"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250414/990fd18129849e34926323f5d32e41fa.png">
				</image>
				<view class="item-text">扫一扫</view>
			</view>
		</view>
		<view class="triangle-up"></view>
	</view>
	<uni-transition :show="show" :duration="300" mode="fade" @click="emit('close')">
		<view class="mask" v-if="show"></view>
	</uni-transition>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'
	import {cdn,udid} from '@/im/config/index.js'

	const emit = defineEmits(['close'])

	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
	})
	
	const iMMyInfo = computed(() => $store().userInfo);

	const codes = ref(null)

	const addFriend = () => {
		emit('close')
		sheep.$router.go('/im/pages/newFriend')
	}

	const createGroup = () => {
		emit('close')
		sheep.$router.go('/im/pages/createGroup')
	}

	const scanCode = () => {
		emit('close')
		uni.scanCode({
			scanType: ['qrCode'],
			success(res) {
				let obj = getCodeObject(res.result)
				codes.value = obj
				if (obj && obj.name === 'friend') {
					uni.showModal({
						title: '提示',
						content: '是否添加好友?',
						success(res) {
							if (res.confirm) {
								analysisCode()
							} else {
								times.value = false
							}
						}
					});
				}

				if (obj && obj.name === 'group') {
					uni.showModal({
						title: '提示',
						content: '是否加入此群聊?',
						success(res) {
							if (res.confirm) {
								addGroup()
							} else {
								times.value = false
							}
						}
					});
				}
			}
		});
	}

	const addGroup = async () => {
		if (codes.value) {
			wx.$app.joinGroup({
					groupID: codes.value.code,
					applyMessage: '我想申请加入贵群，望批准！'
				})
				.then((e) => {
					imApi.addGroup({
						type: udid,
						group_id: codes.value.code,
						to_account: iMMyInfo.value.userID,
						from_account: ''
					})
					wx.showModal({
						title: '提示',
						content: '加群成功，是否立即前往？',
						confirmText: '立即前往',
						success: (res) => {
							if (res.confirm) {
								$store().getChatInfo(`GROUP${codes.value.code}`, 'group')
							}
						},
					})
				})
				.catch((err) => {
					console.log(err)
				})
		}
	}

	const analysisCode = async () => {
		const {
			code,
			data,
			msg
		} = await imApi.addFriend({
			from_account: iMMyInfo.value.userID,
			to_account: codes.value.code
		})
		if (code === 0) {
			sheep.$helper.toast('添加成功')
		} else {
			sheep.$helper.toast(msg)
		}
	}


	const getCodeObject = (url) => {
		if (url.indexOf('im_id') !== -1) {
			const imId = url.split('im_id=')[1]
			return {
				name: 'friend',
				code: imId
			};
		} else {
			return {
				name: 'group',
				code: url
			};
		}
		return null;
	}
</script>


<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.popover {
		position: relative;
	}

	.list {
		position: absolute;
		right: 0;
		top: 60rpx;
		width: 205rpx;
		// height: 130rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
		z-index: 99;

		.item {

			.item-image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}

			.item-text {
				font-size: 28rpx;
				font-weight: 350;
				color: #3D3D3D;
			}
		}
	}

	.triangle-up {
		position: absolute;
		right: 20rpx;
		top: 47rpx;
		z-index: 99;
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 14rpx solid #FFFFFF;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 98;
	}
</style>